<template>
  <div class="home">
    <el-radio v-model="radio1" label="1">备选项</el-radio>
    <el-radio v-model="radio1" label="2">备选项</el-radio>
    <br />
    <el-radio-group v-model="radio2">
      <!--如果el-radio-group传的值是字符串，不会选中？？？-->
      <!--dibaled可以动态绑定，可以禁用整个按钮组-->
      <el-radio border :disabled="disabled1" :label="3">备选项3</el-radio>
      <el-radio :label="6">备选项6</el-radio>
      <el-radio :label="9">备选项9</el-radio>
    </el-radio-group>
    <br />
    <el-radio-group v-model="radio3">
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="浙江"></el-radio-button>
    </el-radio-group>
    <br />
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    <br />
    <!---->
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
    >全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <!--可以在外部更改此group的选项，此时不会受min和max的限制-->
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" :min="1" :max="2">
      <!--此处可以使用el-checkbox-button代替-->
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "Form",
  components: {},
  data: function() {
    return {
      radio1: "1",
      radio2: 3,
      radio3: "北京",
      disabled1: true,
      checkList: ["复选框 A", "复选框 B", "选中且禁用"],
      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = val ? true : false;
      console.log("val", val);
      console.log("checkAll", this.checkAll);
      console.log("isIndeterminate", this.isIndeterminate);
    },
    handleCheckedCitiesChange(value) {
      console.log(this.checkAll);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      console.log(value);
    }
  }
};
</script>
